import React, { useState, useEffect } from 'react';
// ui
import ReactECharts from 'echarts-for-react';

const Page: React.FC<any> = (props: any, ref: any) => {
  //地区数据  
  // const [areaData,setAreaData]=useState();
  // 地图配置项
  const [chartOption, setChartOption] = useState({
    layoutCenter: ['50%', '70%'],//位置
    layoutSize: '135%',//大小               
    // zoom: 0.8,
    tooltip: {
      //鼠标移动到某个省份时显示内容
      show: true,
      formatter: function (resData: any) {
        if (resData) {
          if (resData.name === "南海诸岛" || !resData.name) {
            return `${resData.name}<br/>
                  暂无数据`;
          } else {
            let dom = resData.data.children.map((item: any) => {
              return `<div style="float:left;width:50%">${item.name}&nbsp;新增本土：${item.today.confirm}</div>`
            });
            return `<div style="font-weight:bold;">${resData.name}&nbsp;现有确诊：${resData.value}&nbsp;新增本土：${resData.data.today.confirm}</div>
                    <div style="width:500px">${dom.join("")}</div>
                  `;
          }
        }
      },
    },
    geo: {
      type: "map",
      map: "china",
      aspectScale: 0.75, //长宽比        
      // geoIndex: 0, // 不可缺少，否则无tooltip 指示效果            
      // selectedMode: false,                      
      itemStyle: {
        normal: {
          areaColor: "#013C62",
          shadowColor: "#182f68",
          shadowOffsetX: 0,
          shadowOffsetY: 15,

        },
        emphasis: {
          areaColor: "#2AB8FF",
        },
      },
      select: {
        itemStyle: {
          areaColor: "black",
          borderColor: "#f18355",
          borderWidth: "3"
        }
      }
    },
    // selectedMode: "multiple",               
    series: [
      {
        name: "中国疫情地图",
        type: 'map',
        map: 'china',

        itemStyle: {
          normal: {
            borderColor: "#2ab8ff",
            borderWidth: 1.5,
            label: {
              show: true,
              color: "white",
            }
          },
          emphasis: {
            areaColor: "#2AB8FF",
            label: {
              show: true,
              color: "white",
            }
          },
        },
        data: [],
      },
    ],
    visualMap: {
      // 左下角定义 在选中范围中的视觉元素 渐变地区颜色 
      type: 'piecewise',
      right: 20,
      bottom: 20,
      splitNumber: 6,
      seriesIndex: [0],
      itemWidth: 20, // 每个图元的宽度
      itemGap: 2,    // 每两个图元之间的间隔距离，单位为px                         
      pieces: [      // 自定义每一段的范围，以及每一段的文字     
        { gte: 10000, label: '10000人以上', color: '#800080' },
        { gte: 1000, lte: 9999, label: '1000-9999人', color: '#F5222D' },
        { gte: 500, lte: 999, label: '50-999人', color: '#FA541C' },
        { gte: 100, lte: 499, label: '100-499人', color: '#FA8C16' },
        { gte: 0, lte: 99, label: '0-99人', color: '#12235c' }          // 不指定 min，表示 min 为无限大（-Infinity）。
      ],
    },
  });

  useEffect(() => {
    if (props.areaData) {
      // setAreaData(props.areaData);      
      let chartOptionCopy = JSON.parse(JSON.stringify(chartOption));
      chartOptionCopy.series[0].data = props.areaData.children;
      setChartOption(chartOptionCopy);
    }
  }, [props.areaData]);// eslint-disable-line

  return (
    <>
      <ReactECharts style={{ height: '100%' }} option={chartOption} />
    </>
  );
};

export default Page;